<template>
    <div>
        <el-dialog :title="`${self.title} -> ${dialogInfo.title}`" ref="dialogRef" v-model="dialogInfo.visible"
          :top="dialogInfo.top || '2vh'"
          :close-on-click-modal="false"
          :close-on-press-escape="false"
          :destroy-on-close="dialogInfo.destroyOnClose"
          :width="dialogInfo.width || '80vw'"
          >
          
            <el-scrollbar class="bor"
              :style="'height:'+(dialogInfo.height || '70vh')+';'"
            >
            <div v-if="dialogInfo.tip">{{ dialogInfo.tip }}</div>
            <el-form
                :label-width="dialogInfo.labelWidth || '150px'"
                ref="formRef"
                :model="dialogInfo.form"
                :inline="dialogInfo.inline"
                :rules="dialogInfo.rules">
              <template v-for="(item, index) in dialogInfo.columns" :key="index">
                <template v-if="item.hide !== true">
                  <el-form-item
                      :label="item.labelVisible === false ? '' : (item.realLabel ? item.realLabel : item.label+'('+item.prop+')')"
                      :label-width="item.labelVisible === false ? '0px' : (dialogInfo.labelWidth || '300px')"
                      :error="item.errorMsg"
                      :required="item.required">
                    <template v-if="item.type == 'select'">
                      <el-select v-model="dialogInfo.form[item.prop]"
                          :multiple="item.multiple === true"
                          filterable
                          :allow-create="item.allowCreate ? true : false"
                          :style="item.columnStyle ? item.columnStyle : 'width:100%'"
                          :disabled="item.disabled === true"
                          @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                          :placeholder="item.placeholder"
                          :clearable="true">
                        <el-option v-for="(item,index) in item.list" :key="index" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                    </template>
                    <template v-else-if="item.type == 'date'">
                      <el-date-picker v-model="dialogInfo.form[item.prop]"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD 00:00:00"
                          :type="item.type"

                          :style="item.columnStyle ? item.columnStyle : 'width:100%'"
                          :disabled="item.disabled === true"
                          @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                          :placeholder="item.placeholder"
                          :clearable="true">
                      </el-date-picker>
                    </template>
                    <template v-else-if="item.type == 'datetime'">
                      <el-date-picker v-model="dialogInfo.form[item.prop]"
                          format="YYYY-MM-DD HH:mm:ss"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          :type="item.type"

                          :style="item.columnStyle ? item.columnStyle : 'width:100%'"
                          :disabled="item.disabled === true"
                          @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                          @focus="self.onFocus({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                          :placeholder="item.placeholder"
                          :clearable="true">
                      </el-date-picker>
                    </template>
                    <template v-else-if="item.type == 'year'">
                      <el-date-picker v-model="dialogInfo.form[item.prop]"
                          format="YYYY"
                          value-format="YYYY-01-01 00:00:00"
                          :type="item.type"

                          :style="item.columnStyle ? item.columnStyle : 'width:100%'"
                          :disabled="item.disabled === true"
                          @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                          :placeholder="item.placeholder"
                          :clearable="true">
                      </el-date-picker>
                    </template>
                    <template v-else-if="item.type == 'textarea'">
                      <el-input v-model="dialogInfo.form[item.prop]"
                          :rows="item.rows || 3"
                          :type="item.type"

                          :style="item.columnStyle ? item.columnStyle : 'width:100%'"
                          :disabled="item.disabled === true"
                          @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                          @click="item.onclick"
                          :placeholder="item.placeholder"
                          :clearable="true">
                      </el-input>
                    </template>
                    <template v-else-if="item.type == 'monaco-editor'">
                      <div class="monaco" id="monaco-editor-parent">
                        <div class="monaco-editor" id="monaco-editor"></div>
                      </div>
                    </template>
                    <template v-else-if="item.type == 'project_table'">
                      <div style="display:flex;width=100%;align-items: center;justify-content: space-around;">
                        <el-switch v-model="dialogInfo.form[item.prop+'_active']"
                            :active-value="'activeValue' in item ? item.activeValue : 1"
                            :inactive-value="'inactiveValue' in item ? item.inactiveValue : 0"
                            active-color="'activeColor' in item ? item.activeColor : #13ce66"
                            inactive-color="'inactiveColor' in item ? item.inactiveColor : #e4e7ed"

                            :width="80"
                            inactive-text=""
                            :disabled="item.disabled === true"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns, extra_column_name:'active'})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-switch>
                        <div style="width:10px">
                        </div>
                        <el-input v-model="dialogInfo.form[item.prop+'_alias']"

                            :disabled="item.disabled === true || !dialogInfo.form[item.prop+'_active']"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns, extra_column_name:'alias'})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input>
                        <div style="width:30px">
                        </div>
                        <el-switch v-model="dialogInfo.form[item.prop+'_ignore_no_generate']"
                            :active-value="'activeValue' in item ? item.activeValue : 1"
                            :inactive-value="'inactiveValue' in item ? item.inactiveValue : 0"
                            active-color="'activeColor' in item ? item.activeColor : #13ce66"
                            inactive-color="'inactiveColor' in item ? item.inactiveColor : #e4e7ed"
                            :width="100"
                            active-text="不生成文件"
                            inactive-text=""
                            :disabled="item.disabled === true"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns, extra_column_name:'ignore_no_generate'})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-switch>
                        <div style="width:30px"></div>
                      </div>
                    </template>
                    <template v-else-if="item.type == 'parameter_sql'">
                      <div style="display:flex;width=100%;align-items: top;justify-content: space-around;">
                        <el-input v-model="dialogInfo.form[item.prop]"
                            :rows="item.rows || 3"
                            type="textarea"
                            class="parameter_sql_left"
                            :id="self.name+'-'+item.prop"
                            style="width:40vw;"
                            input-style="white-space: pre;"
                            :disabled="item.disabled === true"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input>
                        <div style="width:1vw">
                        </div>
                        <el-input v-model="dialogInfo.form[item.prop+'_tip']"
                            :rows="item.rows || 3"
                            type="textarea"
                            class="parameter_sql_tip"
                            style="width:20vw;"
                            input-style="white-space: pre;"
                            :id="self.name+'-'+item.prop+'_right'"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input>
                        <div style="width:1vw">
                        </div>
                        <template v-for="(buttonItem, buttonIndex) in (item.buttons || [])" :key="buttonIndex">
                          <el-button v-if="!buttonItem.hide" :type="buttonItem.type" style="margin-bottom:10px;"
                          @click="buttonItem.onclick({...dialogInfo, button: buttonItem, column: item, self})" :loading="'loading' in buttonItem ? buttonItem.loading : false">
                          {{buttonItem.label}}</el-button>
                        </template>
                      </div>
                    </template>
                    <template v-else-if="item.type == 'extra_info_common_'">
                      <div style="display:flex;width=100%;align-items: top;justify-content: space-around;">
                        <div>键</div>
                        <div style="width:10px">
                        </div>
                        <el-input v-model="dialogInfo.form[item.prop+'_k']"
                            :disabled="item.disabled === true"
                            style="width:30%"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input>
                        <div style="width:10px">
                        </div>
                        <div>值</div>
                        <div style="width:10px">
                        </div>
                        <el-input v-model="dialogInfo.form[item.prop+'_v']"
                            :rows="item.rows || 3"
                            type="textarea"
                            style="width:500px"
                            :disabled="item.disabled === true"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input>
                        <div style="width:30px">
                        </div>
                        <template v-for="(buttonItem, buttonIndex) in (item.buttons || [])" :key="buttonIndex">
                          <el-button v-if="!buttonItem.hide" :type="buttonItem.type" style="margin-bottom:10px;"
                          @click="buttonItem.onclick({...dialogInfo, button: buttonItem, column: item, self})" :loading="'loading' in buttonItem ? buttonItem.loading : false">
                          {{buttonItem.label}}</el-button>
                        </template>
                        <el-button v-if="item.button && !(item.button||{}).hide" :type="(item.button||{}).type" style="margin-bottom:10px;"
                        @click="item.button.onclick({...dialogInfo, button: item.button, column: item, self})" :loading="'loading' in (item.button||{}) ? item.button.loading : false">
                        {{(item.button||{}).label}}</el-button>
                        <!-- <el-icon color="blue">
                          <Delete />
                        </el-icon> -->
                      </div>
                    </template>
                    <template v-else-if="item.type == 'extra_info_common_table_'">
                      <div style="display:flex;width=100%;align-items: top;justify-content: space-around;">
                        <div>表</div>
                        <div style="width:10px">
                        </div>
                        <el-input v-model="dialogInfo.form[item.prop+'_t']"
                            :disabled="item.disabled === true"
                            style="width:30%"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input>
                        <div style="width:10px">
                        </div>
                        <div>键</div>
                        <div style="width:10px">
                        </div>
                        <el-input v-model="dialogInfo.form[item.prop+'_k']"
                            :disabled="item.disabled === true"
                            style="width:30%"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input>
                        <div style="width:10px">
                        </div>
                        <div>值</div>
                        <div style="width:10px">
                        </div>
                        <el-input v-model="dialogInfo.form[item.prop+'_v']"
                            :rows="item.rows || 3"
                            type="textarea"
                            style="width:500px"
                            :disabled="item.disabled === true"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input>
                        <div style="width:30px">
                        </div>
                        <template v-for="(buttonItem, buttonIndex) in (item.buttons || [])" :key="buttonIndex">
                          <el-button v-if="!buttonItem.hide" :type="buttonItem.type" style="margin-bottom:10px;"
                          @click="buttonItem.onclick({...dialogInfo, button: buttonItem, column: item, self})" :loading="'loading' in buttonItem ? buttonItem.loading : false">
                          {{buttonItem.label}}</el-button>
                        </template>
                        <el-button v-if="item.button && !(item.button||{}).hide" :type="(item.button||{}).type" style="margin-bottom:10px;"
                        @click="item.button.onclick({...dialogInfo, button: item.button, column: item, self})" :loading="'loading' in (item.button||{}) ? item.button.loading : false">
                        {{(item.button||{}).label}}</el-button>
                        <!-- <el-icon color="blue">
                          <Delete />
                        </el-icon> -->
                      </div>
                    </template>
                    <template v-else-if="item.type == 'extra_info_common_project_'">
                      <div style="display:flex;width=100%;align-items: top;justify-content: space-around;">
                        <div>项目</div>
                        <div style="width:10px">
                        </div>
                        <!-- <el-input v-model="dialogInfo.form[item.prop+'_p']"
                            :disabled="item.disabled === true"
                            style="width:30%"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input> -->
                        <el-select v-model="dialogInfo.form[item.prop+'_p']"
                            :multiple="item.multiple === true"
                            filterable
                            :allow-create="true"
                            style="width:30%"
                            :disabled="item.disabled === true"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                          <el-option v-for="(item,index) in dialogInfo.form[item.prop+'_s']" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <div style="width:10px">
                        </div>
                        <div>键</div>
                        <div style="width:10px">
                        </div>
                        <!-- <el-input v-model="dialogInfo.form[item.prop+'_k']"
                            :disabled="item.disabled === true"
                            style="width:30%"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input> -->
                        <el-select v-model="dialogInfo.form[item.prop+'_k']"
                            :multiple="item.multiple === true"
                            filterable
                            :allow-create="true"
                            style="width:30%"
                            :disabled="item.disabled === true"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                          <el-option v-for="(item,index) in dialogInfo.form[item.prop+'_ks']" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <div style="width:10px">
                        </div>
                        <div>值</div>
                        <div style="width:10px">
                        </div>
                        <el-input v-model="dialogInfo.form[item.prop+'_v']"
                            :rows="item.rows || 3"
                            type="textarea"
                            style="width:500px"
                            :disabled="item.disabled === true"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input>
                        <div style="width:30px">
                        </div>
                        <template v-for="(buttonItem, buttonIndex) in (item.buttons || [])" :key="buttonIndex">
                          <el-button v-if="!buttonItem.hide" :type="buttonItem.type" style="margin-bottom:10px;"
                          @click="buttonItem.onclick({...dialogInfo, button: buttonItem, column: item, self})" :loading="'loading' in buttonItem ? buttonItem.loading : false">
                          {{buttonItem.label}}</el-button>
                        </template>
                        <el-button v-if="item.button && !(item.button||{}).hide" :type="(item.button||{}).type" style="margin-bottom:10px;"
                        @click="item.button.onclick({...dialogInfo, button: item.button, column: item, self})" :loading="'loading' in (item.button||{}) ? item.button.loading : false">
                        {{(item.button||{}).label}}</el-button>
                        <!-- <el-icon color="blue">
                          <Delete />
                        </el-icon> -->
                      </div>
                    </template>
                    <template v-else-if="item.type == 'extra_info_common_workspace_config_'">
                      <div style="display:flex;width=100%;align-items: top;justify-content: space-around;">
                        <div>项目</div>
                        <div style="width:10px">
                        </div>
                        <div>键</div>
                        <div style="width:10px">
                        </div>
                        <el-select v-model="dialogInfo.form[item.prop+'_k']"
                            :multiple="item.multiple === true"
                            filterable
                            :allow-create="true"
                            style="width:30%"
                            :disabled="item.disabled === true"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                          <el-option v-for="(item,index) in dialogInfo.form[item.prop+'_ks']" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                        <div style="width:10px">
                        </div>
                        <div>值</div>
                        <div style="width:10px">
                        </div>
                        <el-input v-model="dialogInfo.form[item.prop+'_v']"
                            :rows="item.rows || 3"
                            type="textarea"
                            style="width:500px"
                            :disabled="item.disabled === true"
                            @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                            :placeholder="item.placeholder"
                            :clearable="true">
                        </el-input>
                        <div style="width:30px">
                        </div>
                        <template v-for="(buttonItem, buttonIndex) in (item.buttons || [])" :key="buttonIndex">
                          <el-button v-if="!buttonItem.hide" :type="buttonItem.type" style="margin-bottom:10px;"
                          @click="buttonItem.onclick({...dialogInfo, button: buttonItem, column: item, self})" :loading="'loading' in buttonItem ? buttonItem.loading : false">
                          {{buttonItem.label}}</el-button>
                        </template>
                        <el-button v-if="item.button && !(item.button||{}).hide" :type="(item.button||{}).type" style="margin-bottom:10px;"
                        @click="item.button.onclick({...dialogInfo, button: item.button, column: item, self})" :loading="'loading' in (item.button||{}) ? item.button.loading : false">
                        {{(item.button||{}).label}}</el-button>
                        <!-- <el-icon color="blue">
                          <Delete />
                        </el-icon> -->
                      </div>
                    </template>
                    <template v-else-if="item.type == 'switch'">
                      <el-switch v-model="dialogInfo.form[item.prop]"
                          :active-value="'activeValue' in item ? item.activeValue : 1"
                          :inactive-value="'inactiveValue' in item ? item.inactiveValue : 0"
                          active-color="'activeColor' in item ? item.activeColor : #13ce66"
                          inactive-color="'inactiveColor' in item ? item.inactiveColor : #e4e7ed"

                          :style="item.columnStyle ? item.columnStyle : 'width:100%'"
                          :disabled="item.disabled === true"
                          @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                          :placeholder="item.placeholder"
                          :clearable="true">
                      </el-switch>
                    </template>
                    <template v-else-if="item.type == 'password'">
                      <el-input v-model="dialogInfo.form[item.prop]"

                          type="password"

                          :style="item.columnStyle ? item.columnStyle : 'width:100%'"
                          :disabled="item.disabled === true"
                          @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                          :placeholder="item.placeholder"
                          :clearable="true">
                      </el-input>
                    </template>
                    <template v-else-if="item.type == 'upload'">
                      <el-upload
                        v-model="dialogInfo.form[item.prop]"
                        ref="uploadRef"
                        id="uploadRef"
                        drag
                        action="#"
                        :file-list="dialogInfo.form[item.prop]"
                        
                        :style="item.columnStyle ? item.columnStyle : 'width:100%'"
                        :disabled="item.disabled === true"
                        :on-change="item.onselectfile"
                        :auto-upload="false"
                        :placeholder="item.placeholder"
                        :clearable="true"
                      >
                        <el-icon color="blue">
                          <Upload />
                        </el-icon>
                        <div class="el-upload__text">
                          将文件拖到此处，或
                          <em>点击上传</em>
                        </div>
                      </el-upload>
                    </template>
                    <template v-else>
                      <el-input v-model="dialogInfo.form[item.prop]"

                          :style="item.columnStyle ? item.columnStyle : 'width:100%'"
                          :disabled="item.disabled === true"
                          @change="self.onChange({mode: 'dialog', form: dialogInfo.form, column: item, columns: dialogInfo.columns})"
                          :placeholder="item.placeholder"
                          :clearable="true">
                      </el-input>
                    </template>
                  </el-form-item>
                </template>
              </template>
            </el-form>
            </el-scrollbar>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogInfo.hide ? dialogInfo.hide({dialogInfo}) : dialogInfo.visible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogInfo.onconfirm({...self,dialogInfo})" :loading="'loading' in dialogInfo ? dialogInfo.loading : false">确 定</el-button>
                    <el-button v-if="dialogInfo.title.indexOf('编辑') >= 0" @click="dialogInfo.edit2add({...self,dialogInfo})">转换为添加</el-button>
                    <template v-for="(button,index) in dialogInfo.buttons" :key=index>
                      <el-button v-if="!button.hide" :type="button.type" style="margin-bottom:10px;"
                        @click="button.onclick({...dialogInfo, button})" :loading="'loading' in button ? button.loading : false">
                        {{button.label}}</el-button>
                    </template>
                </span>
            </template>
        </el-dialog>
    </div>
</template>


<script>
import { ref, unref, watch, onMounted } from 'vue'
import { Upload, Delete } from '@element-plus/icons-vue'

export default {
    emits: ['baseMounted'],
    props: {
      self:{},
      dialogInfo: {},
    },
    setup(prop,context) {

        const dialogRef = ref(null)
        const formRef = ref(null)
        const uploadRef = ref(null)
        onMounted(() => {
          if (!prop.dialogInfo.refs) {
            prop.dialogInfo.refs = {}
          }
          prop.dialogInfo.refs.dialogRef = dialogRef
          prop.dialogInfo.refs.formRef = formRef
          prop.dialogInfo.refs.uploadRef = uploadRef
          context.emit('baseMounted', {dialogInfo: prop.dialogInfo, dialogRef, formRef, uploadRef})
        })
        return {dialogRef,formRef, uploadRef, Upload };
    },
};
</script>

<style lang="scss" scoped>

.monaco {
  width: 100%;
  min-height: 60vh;

  .monaco-editor {
    width: 100%;
    min-height: calc(60vh - 0px);
    height: 500px !important;
    overflow: hidden;
    // padding: 20px 0;
    box-sizing: border-box;

  }
  .monaco-diff-editor {
    width: 100%;
    height: 500px !important;
    overflow: hidden;
    // padding: 20px 0;
    box-sizing: border-box;

  }
}
</style>
